@use "../../variables" as *;

.svc-toolbox {
  --toolbox-width-compact: calc(
    var(--ctr-toolbox-item-icon-width, var(--sjs-font-size-x3)) +
    var(--ctr-toolbox-item-padding-right-no-text, var(--sjs-spacing-x1)) +
    var(--ctr-toolbox-item-padding-left-no-text, var(--sjs-spacing-x1)) +
    var(--ctr-toolbox-item-margin-horizontal-no-text, var(--sjs-spacing-x05)) * 2 +
    var(--ctr-toolbox-group-padding-right, var(--sjs-spacing-x150)) +
    var(--ctr-toolbox-group-padding-left, var(--sjs-spacing-x150))
  );

  --thm-toolbox-item-banner-left: calc(
    var(--ctr-toolbox-item-icon-width, var(--sjs-font-size-x3)) +
    var(--ctr-toolbox-item-padding-right-no-text, var(--sjs-spacing-x1)) +
    var(--ctr-toolbox-item-padding-left-no-text, var(--sjs-spacing-x1)) +
    var(--ctr-toolbox-item-margin-horizontal-no-text, var(--sjs-spacing-x05)) * 2 +
    var(--ctr-toolbox-group-padding-right, var(--sjs-spacing-x150)) +
    var(--ctr-tooltip-pointer-height, var(--sjs-size-x05)) * 2
  );

  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: content-box;
}

.svc-toolbox__panel {
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  height: 0;
  display: flex;
  flex-direction: column;
  border-inline-end: var(--ctr-toolbox-border-width-right, var(--sjs-stroke-x1)) solid var(--ctr-toolbox-border-color, var(--sjs-border-25, #d4d4d4ff));
  background: var(--ctr-toolbox-background-color, var(--sjs-layer-1-background-500, #ffffffff));
  min-width: var(--ctr-toolbox-min-width, var(--sjs-size-x20));
  box-sizing: content-box;
}

.svc-toolbox {
  .sv-scroll__wrapper {
    height: 0;
    flex-grow: 1;
  }

  .sv-scroll__scroller {
    padding: var(--ctr-toolbox-padding-top, var(--sjs-spacing-x150)) var(--ctr-toolbox-group-padding-right, var(--sjs-spacing-x150))
      var(--ctr-toolbox-padding-bottom, var(--sjs-spacing-x2)) var(--ctr-toolbox-group-padding-left, var(--sjs-spacing-x150));
    align-items: var(--ctr-toolbox-scroller-align-items, flex-start);

  }
  .sv-scroll__scrollbar {
    inset-inline-end: var(--ctr-toolbox-scrollbar-right, 0);
    inset-inline-start: var(--ctr-toolbox-scrollbar-left, "auto");
    padding: var(--ctr-toolbox-padding-top, var(--sjs-spacing-x150)) 0 var(--ctr-toolbox-padding-bottom, var(--sjs-spacing-x2)) 0;
  }
}

.svc-toolbox--scrollable {
  --toolbox-width: var(--ctr-toolbox-min-width, var(--sjs-size-x20));
}
.svc-toolbox--compact {
  margin-inline-end: var(--ctr-toolbox-margin-left-compact, 0);
  .svc-toolbox__panel {
    overflow: visible;
    width: var(--toolbox-width-compact);
    min-width: var(--toolbox-width-compact);
  }
  .sv-scroll__scroller {
    width: 100vw;
    padding: var(--ctr-toolbox-padding-top, var(--sjs-spacing-x150)) var(--ctr-toolbox-group-padding-right-compact, var(--sjs-spacing-x150))
      var(--ctr-toolbox-padding-bottom, var(--sjs-spacing-x2)) var(--ctr-toolbox-group-padding-left-compact, var(--sjs-spacing-x150));
    pointer-events: none;
  }
  .svc-search {
    opacity: 0;
    position: absolute;
  }
  .svc-toolbox__search-container {
    padding-top: var(--ctr-toolbox-padding-top, var(--sjs-spacing-x150));
    padding-inline-start: var(--ctr-toolbox-group-padding-left, var(--sjs-spacing-x150));
    padding-inline-end: var(--ctr-toolbox-group-padding-left, var(--sjs-spacing-x150));
    padding-bottom: calc(var(--ctr-toolbox-separator-padding-top, var(--sjs-spacing-x1)) + var(--ctr-toolbox-gap, var(--sjs-spacing-x05)));
  }
  .svc-toolbox__category-separator {
    box-sizing: content-box;
    padding-inline-end: var(--ctr-toolbox-separator-padding-right-compact, var(--sjs-spacing-x2));
    padding-inline-start: var(--ctr-toolbox-separator-padding-left-compact, var(--sjs-spacing-x2));
    margin-inline-end: calc(0px - var(--ctr-toolbox-group-padding-right-compact, var(--sjs-spacing-x150)) - var(--ctr-toolbox-item-margin-horizontal-no-text, var(--sjs-spacing-x05)));
    margin-inline-start: calc(0px - var(--ctr-toolbox-group-padding-left-compact, var(--sjs-spacing-x150)) - var(--ctr-toolbox-item-margin-horizontal-no-text, var(--sjs-spacing-x05)));
  }
  .svc-toolbox__category-separator--search {
    margin-inline-end: 0;
    margin-inline-start: 0;
  }
}

.svc-toolbox__tool.svc-toolbox__search-button {
  z-index: 20;
  justify-content: center;
  align-items: center;
  width: fit-content;
  svg {
    height: var(--ctr-toolbox-item-icon-height, var(--sjs-font-size-x3));
    width: var(--ctr-toolbox-item-icon-width, var(--sjs-font-size-x3));
  }
}

.svc-toolbox--flyout {
  --toolbox-width: var(--ctr-toolbox-min-width, var(--sjs-size-x20));
  margin-inline-end: var(--ctr-toolbox-margin-left-compact, 0);
  overflow: visible;
  overflow: visible;
  width: var(--toolbox-width-compact);
  max-width: var(--thm-toolbox-width-compact, calcSize(10.5));
  overflow: visible;
  border-inline-end: var(--ctr-toolbox-border-width-right, var(--sjs-stroke-x1)) solid transparent;

  .svc-search {
    opacity: 1;
    position: relative;
  }

  .svc-toolbox__panel {
    z-index: 200;
    width: fit-content;
    position: relative;
    box-shadow:
      var(--ctr-toolbox-shadow-floating-2-offset-x, 0px)
        var(--ctr-toolbox-shadow-floating-2-offset-y, 16px)
        var(--ctr-toolbox-shadow-floating-2-blur, 32px)
        var(--ctr-toolbox-shadow-floating-2-spread, 0px)
        var(--ctr-toolbox-shadow-floating-2-color, var(--sjs-special-glow, #004c441a)),
      var(--ctr-toolbox-shadow-floating-1-offset-x, 0px)
        var(--ctr-toolbox-shadow-floating-1-offset-y, 2px)
        var(--ctr-toolbox-shadow-floating-1-blur, 8px)
        var(--ctr-toolbox-shadow-floating-1-spread, 0px)
        var(--ctr-toolbox-shadow-floating-1-color, var(--sjs-special-glow, #004c441a));
    transition: box-shadow $creator-transition-duration;
  }
}
.svc-toolbox--searchable {
  .svc-toolbox__search-container {
    display: flex;
  }
}
.svc-toolbox__search-container {
  position: sticky;
  top: 0;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--ctr-toolbox-background-color, var(--sjs-layer-1-background-500, #ffffffff));
  border-bottom: var(--ctr-toolbox-search-border-width-bottom, var(--sjs-stroke-x1)) solid transparent;

  svg {
    pointer-events: none;
  }
}

.svc-toolbox__category {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: var(--ctr-toolbox-gap, var(--sjs-spacing-x05));
  &:last-child {
    margin-bottom: 0;
  }
}

.svc-toolbox__category-separator {
  box-sizing: border-box;
  padding-top: var(--ctr-toolbox-separator-padding-top, var(--sjs-spacing-x1));
  padding-inline-end: var(--ctr-toolbox-separator-padding-right, 0px);
  padding-bottom: var(--ctr-toolbox-separator-padding-bottom, var(--sjs-spacing-x1));
  padding-inline-start: var(--ctr-toolbox-separator-padding-left, var(--sjs-spacing-x2));
  margin-top: var(--ctr-toolbox-gap, var(--sjs-spacing-x05));
  margin-inline-end: calc(0px - var(--ctr-toolbox-group-padding-right, var(--sjs-spacing-x150)));
  margin-inline-start: calc(0px - var(--ctr-toolbox-group-padding-left, var(--sjs-spacing-x150)));
  max-width: var(--ctr-toolbox-separator-max-width, var(--sjs-size-max));
  &:after {
    content: "";
    display: block;
    height: var(--ctr-toolbox-separator-height, var(--sjs-stroke-x1));
    background-color: var(--ctr-toolbox-separator-color, var(--sjs-border-25, #d4d4d4ff));
  }
}

.svc-toolbox__category-separator--search {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  margin-top: 0;
  max-width: initial;
}

.svc-toolbox--no-separators {
  .svc-toolbox__category-separator {
    display: none;
  }
  .svc-toolbox__category-separator--search {
    display: block;
  }
}

.svc-toolbox__category-header-wrapper {
  padding: var(--ctr-toolbox-group-header-margin-top, 0px) var(--ctr-toolbox-group-header-margin-left, var(--sjs-spacing-x150))
    var(--ctr-toolbox-group-header-margin-bottom, 0px) var(--ctr-toolbox-group-header-margin-right, var(--sjs-spacing-x150));
  margin-inline-start: calc(0px - var(--ctr-toolbox-group-padding-left, var(--sjs-spacing-x150)));
  margin-inline-end: calc(0px - var(--ctr-toolbox-group-padding-right, var(--sjs-spacing-x150)));
  align-self: stretch;
}
.svc-toolbox__category-header {
  min-height: var(--ctr-toolbox-group-header-min-height, var(--sjs-spacing-x5));
  padding-top: var(--ctr-toolbox-group-header-padding-top, var(--sjs-spacing-x1));
  padding-inline-end: var(--ctr-toolbox-group-header-padding-right, var(--sjs-spacing-x1));
  padding-bottom: var(--ctr-toolbox-group-header-padding-bottom, var(--sjs-spacing-x1));
  padding-inline-start: var(--ctr-toolbox-group-header-padding-left, var(--sjs-spacing-x2));

  border-radius: var(--ctr-toolbox-group-header-corner-radius, var(--sjs-corner-radius-x1));
  background: var(--ctr-toolbox-group-header-background-color, var(--sjs-layer-1-background-400, #f5f5f5ff));

  box-shadow:
    inset 0 var(--ctr-toolbox-group-header-border-width-top, 0px)
      var(--ctr-toolbox-group-header-border-color, var(--sjs-border-25, #d4d4d4ff)),
    inset calc(0px - var(--ctr-toolbox-group-header-border-width-right, 0px)) 0
      var(--ctr-toolbox-group-header-border-color, var(--sjs-border-25, #d4d4d4ff)),
    inset 0 calc(0px - var(--ctr-toolbox-group-header-border-width-bottom, 0px))
      var(--ctr-toolbox-group-header-border-color, var(--sjs-border-25, #d4d4d4ff)),
    inset var(--ctr-toolbox-group-header-border-width-left, 0px) 0
      var(--ctr-toolbox-group-header-border-color, var(--sjs-border-25, #d4d4d4ff));

  box-sizing: border-box;
  width: 100%;
  min-width: calcSize(20);
  position: relative;
  display: flex;
  align-items: center;
}

.svc-toolbox__category-header--collapsed {
  cursor: pointer;
}

.svc-toolbox__category-title {
  @include ctrSmallBoldFont;
  color: var(--ctr-toolbox-group-header-text-color, var(--sjs-layer-1-foreground-100, #000000e6));
  vertical-align: middle;
  display: block;
  flex-grow: 1;
}

.svc-toolbox__category-header__controls {
  inset-inline-end: calcSize(1);
  top: var(--ctr-category-header-controls-top, calcSize(1));
  display: flex;
  opacity: 0;
  align-self: center;
  margin-top: -50%;
  margin-bottom: -50%;
  transition: opacity $creator-transition-duration;
}

.svc-toolbox__category-header__button {
  fill: var(--ctr-toolbox-group-header-expand-button-color, var(--sjs-layer-1-foreground-75, #000000bf));
  height: var(--ctr-toolbox-item-icon-height, var(--sjs-font-size-x3));
  width: var(--ctr-toolbox-item-icon-width, var(--sjs-font-size-x3));
}

.svc-toolbox__category-header:hover {
  .svc-toolbox__category-header__controls {
    opacity: 1;
  }
}

.svc-toolbox__category--collapsed {
  .svc-toolbox__tool {
    height: 0;
    visibility: hidden;
  }
}

.svc-toolbox__category--empty {
  height: 0;
  visibility: hidden;
}

.svc-toolbox__placeholder {
  @include ctrSmallFont;
  padding-top: calcSize(13.5);
  margin-inline-start: auto;
  margin-inline-end: auto;
  color: var(--ctr-property-grid-placeholder-text-description-color, var(--sjs-layer-1-foreground-50, #00000080));
}

.svc-toolbox--disabled {
  pointer-events: none;
  .svc-toolbox__search-button {
    pointer-events: none;
  }
}
